<template>
  <el-card style="margin: 0px 0 0 0">
    <!-- 上方搜索项 -->
    <Search
      :list="formList"
      :labelWidth="labelWidth"
      :defaultValue="defaultValue"
      :tableCode="tableCode"
      :flagShowHide="formArr.length == 0"
      @submitForm="searchPage"
      @resetForm="resetForm"
      @getSearchList="getSearchList"
      ref="search"
    >
      <div class="box-slot">
        <div class="box-item">
          <Form
            :listForm="formArr"
            :labelWidth="labelWidth"
            :defaultSlotValue="defaultSlotValue"
            @submitFormValue="searchFormList"
            ref="formLockl"
          ></Form>
        </div>
      </div>
    </Search>
  </el-card>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, defineAsyncComponent } from "vue";

// 懒加载 组件
const Form = defineAsyncComponent(
  () => import("@/components/basePage/packageForm/index.vue")
);
const Search = defineAsyncComponent(
  () => import("@/components/basePage/packageSearch/index.vue")
);

// 传过来表单数据详情
interface formListDetails {
  label: string; //文本
  model: string; //绑定的key
  placeholder?: string; //提示
  required?: Boolean; //是否必填
  clearable?: Boolean; //是否清空
  isSelectChange?: Boolean; //是否选择改变触发 事件
  options?: Array<{
    //下拉选项
    value: string;
    label: string;
  }>;
  pickerType?: string; //日期选择器类型
  format?: string; //日期显示格式
  valueFormat?: string; //绑定值格式
  shortcuts?: Array<{ text: string; value: Date | Function }>; //设置快捷选项，需要传入数组对象
  // 单选列表
  itemRadioList?: Array<string>;
  // 单选列表是否为border radio 类型的
  borderHideOrShow?: boolean;
}

// 定义穿过来的props key
interface props {
  // configForm:Object<>
  formList: Array<formListDetails>;
  formArr: Array<formListDetails>;
  defaultValue: Object;
  defaultSlotValue: Object;
  labelWidth: string;
  tableCode: string;
}

onMounted(() => {
  // console.log("props", props.formArr);
});

//获取bus 实例
const Instance = getCurrentInstance()!;
// 接受props
const props = withDefaults(defineProps<props>(), {});

// ref search组件实例
const search = ref();
const formLockl = ref();
// 自定义事件
const emit = defineEmits([
  "submitForm",
  "resetForm",
  "submitFormValue",
  "getAdvancedSearch",
]);

/**
 *  单击搜索获取Form 对象
 */
const searchPage = (exportData: Object) => {
  // 此处需要获取插槽内部的值
  emit("submitForm", Object.assign(formLockl.value.ruleForm, exportData));
  // emit("submitForm", exportData);
};
/**
 * 单击重置
 */
const resetForm = () => {
  //重置插槽隐藏的Form 表单
  Instance.appContext.config.globalProperties.$bus.emit("resetForm");
  emit("resetForm");
};
/**
 * 插槽内部数值集合
 */
const searchFormList = (exportData: Object) => {
  emit("submitFormValue", exportData);
};

/**
 * 获取高级搜索项
 */
const getSearchList = (arrList: any[], condition: string) => {
  emit("getAdvancedSearch", arrList, condition);
};
</script>

<style lang="scss" scoped></style>
